{include file="admin@public/header" /}

<link rel="stylesheet" href="/public/static/admin/easyui/layui-v2.6.8/css/layui.css">
<link href="/public/static/admin/blue/bills.css" rel="stylesheet" type="text/css">
<div class="wrapper">
  <div class="mod-toolbar-top mr0 cf dn" id="toolTop"></div>
  <div class="bills">
    <div class="con-header">
      <dl class="cf">
        <dd class="mr20">
          <label>供应商：</label>
          <span class="ui-combo-wrap" id="customer">
          <input type="text" name="" class="input-txt" autocomplete="off" value="" data-ref="date">
          <i class="ui-icon-ellipsis" onclick="chooseSupplier()"></i></span></dd>

      

        <dd class="mr20">
          <label>单据日期：</label>
          <input type="date" id="dj_time" class="ui-input" value="{$today}" style="width: 125px;">
        </dd>
        <!-- <dd id="identifier" style="float:right">
          <label>单据编号：</label>
          <span id="number">SKD20210823004</span></dd> -->
        <dd id="identifier" style="float:right">
          <label>单据编号:</label>
          <span id="number">{$sn}</span>
          <i id="editBills"></i>
          <span class="ui-combo-wrap" id="numberAuto" style="display: none;">
            <i class="trigger"></i>
          </span>
        </dd>
      </dl>
      <hr class="hrcls" />
      <div class="cf  ">
        <div class="fl">
          <span  id="config" class="ui-config"><a href="#" class="ui-icon-config-new"></a>列设置</span>
        </div>

      </div>
    </div>
    <div class="grid-wrap mb10" id="acGridWrap">
      <table id="grid">
      </table>
    </div>
    <div id="standardVersion">
        
       
        <div class="cf" id="bottomField">
                <span id="groupBtn">
                   
                    <a id="savaAndAdd" class="ui-btn ui-btn-sp">保存并新增</a>
                    <a id="save" class="ui-btn">保存</a>
                    <a id="shenhe" class="ui-btn">审核</a>
                </span>
            </div>

    </div>

   <div class="con-footer cf">
      <div class="mb10">
          <textarea type="text" id="note" class="ui-input ui-input-ph" placeholder="暂无备注信息"></textarea>
      </div>
      <ul id="amountArea" class="cf">
         <li>
          <label id="paymentTxt">结算账户:</label>
          <input type="text" id="account" class="ui-input" value="0.00" >&emsp;
        </li>
        <li>
          <label id="paymentTxt">收款金额:</label>
          <input type="text" id="now_jine" class="ui-input" value="0.00" onchange="zk_jine()" >&emsp;
        </li>
        <li id="accountWrap">
          <label>本次欠款:</label>
          <input type="text" id="qk_jine" class="ui-input ui-input-dis" value="0.00" disabled>
        </li>
      </ul>

      <div class="cf fr">
        <a href="#" class="linkToCheck ui-btn-bill ui-btn-add mr20" onclick="addPage('/money/oriexp/index.html','money','其他支出单记录')">历史单据</a>
        <a href="#" id="operaLog" class="ui-btn">操作日志</a>
      </div>  
    </div>
    <div class="cf" id="bottomField">
      <div class="fr" id="toolBottom"></div>
    </div>
    <div id="mark"></div>
  </div>

</div>

<!--  以隐藏的方式获取商品的样式 ，作用是样式 -->
<div id="p_income_type" style="display:none;"> </div>

<!--  以隐藏的方式获取商品的样式 ，作用是赋值 -->
<div style="display:none;">
    <input type="text" id="income_type_name" value="" autocomplete="off" readonly="">
    <input type="text" id="user_id" value="" autocomplete="off" readonly="">
    <input type="text" id="jine" value="" autocomplete="off" readonly="">
</div> 
 <!--收入类别弹窗 -->
  <div class="ui-droplist-wrap" id="account_wrap"  style="position: absolute; z-index: 1000; width: 182px;display:none;">
    <div class="droplist" id="account_list" style="position: relative; overflow: auto; min-height: 150px; height: 150px;">
      {volist name="income_type" id="vo"}
      <div class="list-item" account_id="{$vo.id}" title="{$vo.name}">{$vo.name}</div>
      {/volist}
    </div>
  </div>




<script type="text/javascript">
    var edit_row = 0;
    var edit_col = 0;
    var row_id = 0;
    var col_name = 0;
    $(document).ready(function () {
        $("#grid").jqGrid({
            // url: '/admin/store/index.html?ajax=100',
            datatype: "local",//数据来源，本地数据（local，json,jsonp,xml等）
            height: '90%',//高度，表格高度。可为数值、百分比或'auto'
            colNames: ['<span class="red">*</span>支出类别','<span class="red">*</span>金额', '备注', '收入类别ID'],
            colModel: [
               // { name: '', width: 70,},
                {
                    name: "income_type_name",
                    width: 180,
                    link: "inventory",
                    editable: true,
                    edittype: "custom",
                    editoptions: {
                    custom_element: function (t, e) {
                        $("#p_income_type").html('<div class="pr" id="income_type"><input type="text" value="'+t+'" class="textbox storageAuto customelement ui-combo-active" autocomplete="off" style="outline: -webkit-focus-ring-color auto 5px;"><span class="ui-icon-triangle-1-s" id="income_type_id1"></span></div>');
	                      return $("#income_type");
	                    },
	                    custom_value: function (t, e, a) {
	                      var ba = $("#income_type_name").val();
	                      $("#income_type_name").val("");
	                      return ba;
	                    },

	                    trigger: "ui-icon-triangle-1-s"
                    }
                },

                { name: 'jine', width: 150,editable: true, editoptions: {
                    size: 25,
                    dataEvents: [
                      {
                        type: 'change',     //blur,focus,change............. 
                        fn: function (e) {
                          reload_val();
                        }
                      }
                    ]
                  }
                },
          
                { name: 'mark',  width: 350, editable: true },
                { name: 'income_type_id',  hidden: true },
               
            ],
            cellEdit: true,
            cellurl: '/',
            sortname: 'id',
            sortorder: "desc",
            rownumbers: true, //自增序号
          
            altRows: !0,
            gridview: !0,
            shrinkToFit: !1,
            cellLayout: 8,
            autowidth: !0,
            pager: "#page",
            viewrecords: !0,
            cmTemplate: {
                sortable: !1,
                title: !1
            },
            // 合计
            footerrow: true,
            loadError: function (t, e, i) {
                parent.Public.tips({
                    type: 1,
                    content: "操作失败了哦，请检查您的网络链接！"
                })
            },
            beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
                col_name = cellname;
                edit_row = iRow;
                edit_col = iCol;
                row_id = rowid;
                var aname = $("#grid").jqGrid("getCell", row_id, 'income_type_name');
                $("#income_type_name").val(aname);
         
            },
            gridComplete: function () {
              // 合计的变量
              var jines = $("#grid").getCol('jine', false, 'sum');
              $("#jine").val(jines);//付款总金额
              $("#now_jine").val(jines);//本次付款
              $("#qk_jine").val(0);//本次欠款
              $("#grid").footerData('set', { "income_type_name": '合计：', jine: jines,});
            },
        });

        var mydata = [];
        for (var i = 0; i < 5; i++) {
            var obj = { id: i + 1, account_money: "0",settle_sn:"",mark:""}
            mydata.push(obj);
        }
        for (var i = 0; i <= mydata.length; i++) {
            jQuery("#grid").jqGrid('addRowData', i + 1, mydata[i]);
        }


    });
    
</script>
<script type="text/javascript">
    $(document).ready(function () {
        // 选择收入类别-弹窗
        $(".grid-wrap").on("click", "#income_type_id1", function (e) {
            var top = $(this).offset().top;
            var left = $(this).offset().left;
            $("#account_wrap").slideToggle();
            $("#account_wrap").css({ "top": (top + 22) + "px", "left": (left - 158) + "px" })
        })
        //选择收入类别-赋值
        $("#account_wrap #account_list").on("click", ".list-item", function (e) {

            var title = $(this).attr("title");
            //结算账户
            if (col_name == "income_type_name") {
                var account_id = $(this).attr("account_id");
                $("#income_type_name").val(title);
                $("#grid").jqGrid("setCell", row_id, 'income_type_id', account_id);
                $("#grid").jqGrid("setCell", row_id, 'income_type_name', title);//及时保存
                $("#grid").jqGrid("saveCell", edit_row, edit_col);//保存数据表格
            }
            $("#grid").saveRow(row_id, false);
            $("#account_wrap").hide();
        });
    })
     //选择收入类别-选择框外点击则隐藏
    $(document).mouseup(function (e) {
        if(e.target.id!="income_type_id1"){
            var con = $("#account_wrap");   // 设置目标区域
            if (!con.is(e.target) && con.has(e.target).length === 0) {
                 $("#account_wrap").hide();
            }
        } 
    });

  

</script>
<script type="text/javascript">
	 //选择经销商(供应商)
  function chooseSupplier() {
    layer.open({
			type: 2,
			title: "选择供应商",
			shadeClose: true,
			shade: 0.3,
			maxmin: false, //开启最大化最小化按钮
			area: ['600px', '510px'],
			fixed: false, //不固定
			btn: ['确定', '取消'],
			content: "/admin/basic/choose_customer.html?single=0&is_customer=0",//多选，供应商
			btn1: function (index, layero) {
				var body = layer.getChildFrame('body', index);
				//获取所有选中行
				var ids =  body.find("#grid").jqGrid('getGridParam','selarrrow');

				if (ids == '' || ids == null) {
					layer.msg("请选择供应商");
					return false;
				} else {
					//alert(ids);
					//return false;
					//获取商品信息
					$.get("/admin/basic/one_supplier.html", { ids: ids }, function (data, state) {
						if (data.status == 1) {
              $("#customer input").val(data.info.names);
              $('#user_id').val(data.info.ids);
						} else {
							layer.msg("获取信息失败");
						}
					})
				}
				layer.close(index);
				return false;
			},
			btn4: function (index, layero) {
				layer.close(index);
				return false;
			}
		})
  }
</script>


<script type="text/javascript">

  function reload_val() {
    var rid = row_id;
    var c_name = col_name;
    if (c_name == "jine") {
        // 合计的变量
        var jines = $("#grid").getCol('jine', false, 'sum');//总金额
        $("#jine").val(jines);//付款总金额
        $("#now_jine").val(jines);//本次付款
        $("#qk_jine").val(0);//本次欠款
        $("#grid").footerData('set', { "income_type_name": '合计：', jine: jines});
    } 

  }


  
   //本次付款改变
  function zk_jine() {

    var jines = $("#grid").getCol('jine', false, 'sum');//总金额
    var now_jine =$("#now_jine").val();//本次付款
    var jine =$("#jine").val();//总金额
    $('#qk_jine').val(parseFloat(jine)-parseFloat(now_jine));//总欠款=付款总金额-本次付款
  }
</script>
<script type="text/javascript">
  var grid = $('#grid');
  $(".wrapper").on("click", "#savaAndAdd", function (e) {
    //先保存
    save_jqgrid(edit_row,edit_col,grid,function (res) {
        savedata();
    });
  })

  function savedata() {
    var gooddata = $('#grid').jqGrid('getGridParam', 'data');
    var flag = 0;
    var hasuser = 0;
    var hasuser1=0;
    var indexArr = [];
    //console.log(gooddata);
    gooddata.forEach(function (self, index) {
      //console.log(self);
      if (self['income_type_id'] != null ) {
        hasuser = hasuser + 1;
        if (self['jine'] == null || self['jine'] == "") {
          flag = 1;
          indexArr.push(index);
        }else{
           hasuser1 = hasuser1 + 1;
        }
      }
    });
    if (hasuser == 0) {
      layer.msg("请选择支出类别");
      $("#grid").editCell(1, 1, true);
      return false;
    }

    if (flag == 1) {
      layer.msg("请填写金额");
      $("#grid").editCell(indexArr[0] + 1, 2, true);
      return false;
    }

    if (hasuser != hasuser1) {
      layer.msg("请填写完整支出类别和金额");
      return false;
    }

    var user_id = $("#user_id").val();//经销商ID
    if (user_id == "") {
      layer.msg("请选择供应商");
      return false;
    }

    var dj_time = $("#dj_time").val();//单据日期
    var sn = $("#number").html();//单据号
    var mark = $("#note").val();//备注
    var jine = $("#jine").val();//金额
    var now_jine = $("#now_jine").val();//本次收款
    var qk_jine = $("#qk_jine").val();//本次欠款
    //return false;
    $.ajax({
      type: 'POST',
      url: "save.html",
      data: { user_id: user_id, sn: sn, mark: mark, gooddata: gooddata, dj_time: dj_time,qk_jine:qk_jine,now_jine:now_jine,jine:jine},
      dataType: "json",
      async: false,
      error: function (request) {
        layer.msg("发送请求失败！");
      },
      success: function (data) {
        if (data.status == 1) {
          layer.msg(data.msg);
        } else {
          layer.msg(data.msg);
        }

      }
    });

  }
  $(".wrapper").on("click", "#save", function (e) {
      save_jqgrid(edit_row,edit_col,grid,function (res) {
          layer.msg("保存成功");
      });
  })

</script>
{include file="admin@public/footer" /}